<template>
  <div>
<MyTable :list="list">
  <!-- 具名插槽v-slot:xxx 是全称， 简写是#xxxx -->
  <!-- 如果btn是作用域插槽，就是 #名称的 后面写等号，随便写个变量名称，就可以得到子组件抛出来的值 -->
  <template #btn="abc">
    <button @click="del(abc)">删除</button>
  </template>
</MyTable>
    
    <MyTable :list="list2">
      <template #btn>
        <a href="#">查看</a>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  data () {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    }
  },
  components: {
    MyTable
  },
  methods:{
    del(value){
      console.log(value);
      this.list.splice(value.index, 1)
    }
  }
}
</script>
